<!-------------------面板标题 Start-------------------->
<div class="bg-light lter b-b wrapper-md">
    <h1 class="m-n font-thin h3" translate="nav.tables.flexigrid"></h1>
</div>
<!-------------------面板标题 End---------------------->


<!-------------------列表模板 Start-------------------->
<div class="wrapper-md">
    <!--面板-->
    <div class="panel panel-default">
        <!--面板标题-->
        <div class="panel-heading font-bold" translate="nav.tables.flexigrid"></div>
        <!--表格-->
        <div class="panel-neck row">
            <form class="form-inline col-md-12" role="form">
                <!--搜索属性 Start一-->
                <div class="form-group">
                    <input class="form-control" name="attribute1"
                           id="attribute1"
                           ng-model="vm.query.attribute1"
                           maxlength="32"
                           placeholder="{{'demo.attribute1' | translate}}"/>
                </div>
                <div class="form-group">
                    <input class="form-control" name="attribute2"
                           id="attribute2"
                           maxlength="32"
                           ng-model="vm.query.name"
                           placeholder="{{'demo.attribute2' | translate}}"/>
                </div>
                <div class="form-group">
                    <input class="form-control" name="attribute3" id="attribute3"
                           maxlength="32"
                           ng-model="vm.query.attribute3"
                           ng-pattern="app.reg.account"
                           placeholder="{{'demo.attribute3' | translate}}"/>
                </div>
                <div class="form-group">
                    <input class="form-control" name="attribute3" id="attribute4"
                           maxlength="32"
                           ng-model="vm.query.attribute4"
                           ng-pattern="app.reg.account"
                           placeholder="{{'demo.attribute4' | translate}}"/>
                </div>

                <!--
                搜索属性说明：
                    ng-model : 模型绑定
                    maxlength : 限定最大长度
                    placeholder : 占位符
                    ng-pattern : 校验规则，可以参考文本框校验，app.reg.account 引用于 util.js
                    {{'demo.attribute1' | translate}} : 国际化取值---》对应zh.json文件中的内容
                -->

                <!--搜索属性 End-->


                <!--右侧按钮组 Start-->
                <div class="form-group pull-right">
                    <!--查询-->
                    <button class="btn btn-sm btn-primary" ng-click="vm.search()">
                        <i class="fa fa-search"></i> {{'common.search'|translate}}
                    </button>
                    <!--添加--><!--iss-permission="B_DEMO_ADD"-->
                    <button  class="btn btn-sm btn-primary" id="addBtn"
                            ng-click="vm.add()">
                        <i class="fa fa-plus"></i> <span translate="common.add"/>
                    </button>
                    <!--批量删除--><!--iss-permission="B_DEMO_UNLOCK"-->
                    <button  class="btn btn-sm btn-danger" id="unlock"
                            ng-click="vm.unlock()">
                        <i class="fa fa-trash-o"></i> <span translate="common.batchDel"/>
                    </button>
                    <!--重置-->
                    <button class="btn btn-sm btn-default" ng-click="vm.reset()">
                        <i class="fa fa-refresh"></i> {{'common.reset' | translate}}
                    </button>
                </div>

                <!--
                按钮属性说明：
                    class : 样式(参考按钮开发说明)
                    ng-click : 绑定点击事件，具体事件实现在对应的ctrl中
                    iss-permission : 权限校验
                    <span translate="common.add"/> : 国际化取值---》对应zh.json文件中的内容
                    {{'common.reset' | translate}} : 国际化取值---》对应zh.json文件中的内容
                -->

                <!--右侧按钮组 End-->

            </form>

        </div>
        <!--分割线-->
        <div class="b-b"></div>

        <!--------------------列表 Start------------------>
        <div class="panel-body">
            <table id="flexiGrid" class="flexiGrid" iss-flexigrid="vm.tableOptions"
                   flexigrid-control="vm.table"></table>
        </div>

        <!--
        列表属性说明：
            iss-flexigrid : 列表的各种属性配置，对应的vm.tableOptions需要在对应的ctrl中对其初始化
            flexigrid-control : 列表的控制器，在对应的ctrl中初始化
        -->

        <!--------------------列表 End-------------------->
    </div>
</div>
<!-------------------列表模板 End---------------------->
